<template>
	<template>
		<!-- 使用一个总容器来管理页面整体布局和间距 -->
		<view class="page-container">
			<!-- 模块一：可移动区域的容器 -->
			<view class="map-wrapper">
				<movable-area class="movable-area" scale-area="true">
					<movable-view
						class="movable-view"
						:style="{ width: mapWidth + 'px', height: mapHeight + 'px' }"
						direction="all"
						:inertia="inertiaEnabled"
						:out-of-bounds="outOfBoundsEnabled"
						:x="x"
						:y="y"
						:damping="damping"
						:friction="friction"
						:disabled="isDisabled"
						scale="true"
						:scale-min="0.5"
						:scale-max="4"
						:scale-value="scaleValue"
						:animation="animationEnabled"
						@change="onChange"
						@scale="onScale"
					>
						<image class="floor-plan" src="/static/user.webp" mode="aspectFill"></image>
					</movable-view>
				</movable-area>
			</view>

			<!-- 模块二：UI 控制与信息展示区域 -->
			<view class="controls-wrapper">
				<view class="info-display">
					<text>X: {{ currentX.toFixed(0) }} | Y: {{ currentY.toFixed(0) }} | Scale: {{ currentScale.toFixed(2) }}</text>
					<text>Source: {{ changeSource }}</text>
				</view>
				<view class="buttons">
					<button size="mini" @click="resetView">回到中心</button>
					<view class="switch-item">
						<text>惯性</text>
						<switch :checked="inertiaEnabled" @change="toggleInertia" />
					</view>
					<view class="switch-item">
						<text>锁定</text>
						<switch :checked="isDisabled" @change="toggleDisabled" />
					</view>
				</view>
			</view>
		</view>
	</template>
</template>

<script>
export default {
	data() {
		return {
			// 地图尺寸，通常应大于movable-area
			mapWidth: 600,
			mapHeight: 900,

			// -- 绑定到 movable-view 属性 --
			x: 0,
			y: 0,
			scaleValue: 1,
			isDisabled: false,
			inertiaEnabled: true,
			outOfBoundsEnabled: true,
			damping: 20,
			friction: 2,
			animationEnabled: true,

			// -- 用于UI信息展示 --
			currentX: 0,
			currentY: 0,
			currentScale: 1,
			changeSource: 'initial'
		};
	},
	methods: {
		// 核心事件：当拖动或位置改变时触发
		onChange(event) {
			const { x, y, source } = event.detail;
			this.currentX = x;
			this.currentY = y;
			// 只有在非setData触发时才更新source，避免覆盖我们的标识
			if (source) {
				this.changeSource = source;
			}
			console.log('Change Event:', event.detail);
		},

		// 核心事件：当缩放时触发
		onScale(event) {
			const { x, y, scale } = event.detail;
			this.currentX = x;
			this.currentY = y;
			this.currentScale = scale;
			console.log('Scale Event:', event.detail);
		},

		// 控制按钮方法
		resetView() {
			console.log('Reseting view...');
			this.changeSource = 'setData'; // 手动标记来源
			// 通过改变 x, y, scaleValue，并配合 animation=true，实现平滑归位
			this.x = 0;
			this.y = 0;
			this.scaleValue = 1;
		},
		toggleInertia(e) {
			this.inertiaEnabled = e.detail.value;
		},
		toggleDisabled(e) {
			this.isDisabled = e.detail.value;
		},

		// 特殊事件处理
		onHTouchMove(event) {
			// 在这个场景中，我们可以用它来阻止页面级别的左右滑动（如果存在的话）
			// console.log('Horizontal move detected, preventing page scroll.');
			// 这里不需要写 return false，catch 事件本身就阻止了冒泡
		},
		onVTouchMove(event) {
			// 同理，可以阻止页面级别的垂直滚动
			// console.log('Vertical move detected, preventing page scroll.');
		}
	}
};
</script>

<style scoped>
/* [主要改动] 整体页面容器，负责页面的基本间距 */
.page-container {
	padding: 15px;
	background-color: #f8f8f8;
}

/* [主要改动] 地图模块的容器，定义了“框”的外观 */
.map-wrapper {
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	overflow: hidden; /* 确保 movable-area 的圆角生效 */
}

.movable-area {
	width: 100%;
	height: 300px; /* 定义一个固定的高度，形成“框” */
	background-color: #333;
}

.movable-view {
	display: flex;
	align-items: center;
	justify-content: center;
}

.floor-plan {
	width: 100%;
	height: 100%;
}

/* 
 * [主要改动] controls的容器，现在是一个独立的卡片式模块
 * 移除了所有绝对定位相关的属性
*/
.controls-wrapper {
	margin-top: 20px; /* 与上方的地图模块拉开距离 */
	padding: 15px;
	background-color: #ffffff;
	border-radius: 8px;
	border: 1px solid #ebebeb;
}

.info-display {
	font-size: 12px;
	text-align: center;
	margin-bottom: 15px; /* 增加与按钮的间距 */
	color: #666; /* [改动] 之前是白色文字，现在背景变了，要用深色 */
}

.info-display text {
	display: block;
}

.buttons {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.switch-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333; /* [改动] 同样，改为深色文字 */
}

.switch-item text {
	margin-right: 5px;
}
</style>
